<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:form="http://www.w3.org/1999/html"
      layout:decorator="admin/public/layout">

<head>
    <title>修改用户组</title>
</head>
<div  layout:fragment="content">
    <section class="content-header">
        <h1>
            修改用户组
            <small>修改用户组信息</small>
        </h1>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a id="tab1"  href="#tab_base" data-toggle="tab" aria-expanded="false">基本信息</a></li>
                        <li ><a id="tab2"  href="#tab_permission" data-toggle="tab" aria-expanded="true">权限设置</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_base">
                            <form th:object="${role}" role="form" name="editForm" method="POST" enctype="multipart/form-data" th:action="'/admin/role/'+${role.id}">
                                <input name="_method" type="hidden" value="PUT">
                                <div class="box-body">
                                    <div th:class="${#fields.hasErrors('name')}?'form-group has-error':'form-group'">
                                        <label>用户组名称</label>
                                        <input type="text" name="name" class="form-control " placeholder="用户组名称" th:value="${role.name}">
                                        <p  th:if="${#fields.hasErrors('name')}" class="help-block" th:text="${#fields.errors('name')[0]}"></p>
                                    </div>
                                </div>

                                <div class="box-footer">
                                    <button type="submit" class="btn btn-primary">保存</button>
                                    <button type="reset" class="btn btn-success">重置</button>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane" id="tab_permission">
                            <form role="form" name="permissionForm" method="POST" enctype="multipart/form-data" th:action="'/admin/role/resources/'+${role.id}">
                                <input name="_method" type="hidden" value="PUT">
                                <div class="box-body">
                                    <h4>拥有权限</h4>
                                    <div class="form-group">
                                        <div class="col-xs-12" th:id="'resource_'+${resource.id}"  th:each="resource:${allResource.childs}" style="border: 1px solid #edf0f5;margin: 10px;">
                                            <div class="checkbox">
                                                <label>
                                                    <input th:id="'pid_'+${resource.id}" th:attr="rid='resource_'+${resource.id}" class="resourceOne"  type="checkbox" name="resourceIds" th:value="${resource.id}" th:checked="${#lists.contains(role.resources,resource)}"/>
                                                    <span th:text="${resource.name}"></span>
                                                </label>
                                            </div>
                                            <div class="col-xs-2" th:each="resourceTwo:${resource.childs}">
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="resourceIds" th:attr="pid='pid_'+${resource.id}" class="resourceTwo" th:value="${resourceTwo.id}"  th:checked="${#lists.contains(role.resources,resourceTwo)}"/>
                                                        <span th:text="${resourceTwo.name}"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box-footer">
                                    <button type="submit" class="btn btn-primary">保存</button>
                                    <button type="reset" class="btn btn-success">重置</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <script th:inline="javascript">
        $(function () {
            $('.resourceOne').on('ifChecked', function(e){
                var pid = e.target.getAttribute('rid');
                $('#'+pid).find("input[type='checkbox']").iCheck('check');
            });

            $('.resourceOne').on('ifUnchecked', function(e){
                var pid = e.target.getAttribute('rid');
                $('#'+pid).find("input[type='checkbox']").iCheck('uncheck');
            });

            $('.resourceTwo').on('ifChecked', function(e){
                var pid = e.target.getAttribute('pid');
                // $('#'+pid).iCheck('check');
                $('#'+pid).parent().addClass("checked")
                $('#'+pid).attr("checked",'true');
            });

            var tab = getParam('tab');
            if(tab == undefined){
                tab=1;
            }
            $("#tab"+tab).trigger("click");


        });
    </script>
</div>
